<template>
  <a-drawer
    :title="title"
    :width="900"
    placement="right"
    :closable="false"
    @close="close"
    :visible="visible"
  >
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
<!--          <a-col :md="6" :sm="24">-->
<!--            <a-form-item label="来源单据">-->
<!--              <j-dict-select-tag v-model="queryParam.sourceType" placeholder="请选择来源单据" dictCode="stock_source_type"/>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
          <a-col :md="6" :sm="24">
            <a-form-item label="出入库类型">
              <j-dict-select-tag v-model="queryParam.inoutType" placeholder="请选择出入库类型" dictCode="inout_type"/>
            </a-form-item>
          </a-col>
          <a-col :md="14" :sm="24">
            <a-form-item label="下单时间">
              <a-range-picker format="YYYY-MM-DD HH:mm:ss"
                              :show-time="{
                                hideDisabledOptions: true,
                                defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                              }"
                              :placeholder="['开始时间', '结束时间']"
                              @change="onCreateTimeChange"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="listData"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange">
      </a-table>
    </div>
    <!--    <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
          <a-list-item slot="renderItem" key="item.id" slot-scope="item, index">
            <a-descriptions bordered :size="small">
              <a-descriptions-item :label="item.sourceType_dictText">
                <span>
                  {{item.sourceId}}
            <br>
              {{item.createTime}}
            </span>
          </a-descriptions-item>
          <a-descriptions-item :label="item.stockType_dictText">
            {{item.bizType_dictText}}
          </a-descriptions-item>
          <a-descriptions-item :label="item.inoutType_dictText">
            <span style= "display:inline ">
              {{item.oldStock}}
              <span v-if="item.inoutType.toLocaleUpperCase() === 'STOCK_IN'">+</span>
              <span v-else>-</span>
              {{item.quantity}}
            </span>
          </a-descriptions-item>
        </a-descriptions>
      </a-list-item>
    </a-list>-->
  </a-drawer>
</template>

<script>
import { httpAction } from '@/api/manage'
import { getAction } from '@/api/manage'
import moment from 'moment';
import {filterObj} from '@/utils/util'
import pick from 'lodash.pick'

export default {
  name: 'StmStockRecordModalJX',
  components: {},
  data() {
    return {
      title:"库存流水",
      moment,
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      loading:false,
      listData: [],
      // 查询条件
      queryParam: {},
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },
        // {
        //   title: '来源单据',
        //   align:"center",
        //   dataIndex: 'sourceType_dictText'
        // },
        {
          title: '来源单号',
          align:"center",
          dataIndex: 'sourceId'
        },
        {
          title: '出入库类型',
          align:"center",
          dataIndex: 'inoutType_dictText'
        },
        {
          title: '发生时间',
          align:"center",
          dataIndex: 'createTime'
        },
        {
          title: '变动数量',
          align:"center",
          dataIndex: 'quantityStr'
        }
      ],
      /* 排序参数 */
      isorter:{
        column: 'createTime',
        order: 'desc',
      },
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      url: {
        listByStockId: '/stm/stmStock/listStmStockRecordByStockId',
      }
    }
  },
  created() {
  },
  methods: {
    show(record) {
      this.queryParam = {};
      this.visible = true
      this.model = Object.assign({}, record);
      //console.log('this.model.processStatus',this.model.processStatus)
      // 加载子表数据
      if (this.model.id) {
        console.log(this.model.id)
        this.loadStockRecordData(1);
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    getQueryField() {
      //TODO 字段权限控制
    },
    onCreateTimeChange: function(value, dateString) {
      console.log(dateString[0], dateString[1])
      this.queryParam.createTime_begin = dateString[0]
      this.queryParam.createTime_end = dateString[1]
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.pagination = pagination;
      this.loadStockRecordData();
    },
    searchQuery() {
      this.loadStockRecordData(1);
    },
    searchReset() {
      this.queryParam = {}
      this.loadStockRecordData(1);
    },
    getQueryParams() {
      this.queryParam.stockId = this.model.id;
      let param = Object.assign({}, this.queryParam, this.isorter);
      param.field = this.getQueryField();
      param.pageNo = this.pagination.current;
      param.pageSize = this.pagination.pageSize;
      return filterObj(param);
    },
    loadStockRecordData(arg) {
      //let params = { stockId: this.model.id }
      if (arg === 1) {
        this.pagination.current = 1;
      }
      let params = this.getQueryParams();//查询条件
      this.loading = true
      this.listData = []
      getAction(this.url.listByStockId, params).then((res) => {
        if (res.success) {
          res.result.records.forEach(record => {
            if (record.inoutType.toLocaleUpperCase() == 'STOCK_OUT') {
              record.quantityStr = '-' + record.quantity;
            } else {
              record.quantityStr = '+' + record.quantity;
            }
          })
          this.listData = res.result.records;
          this.pagination.total = res.result.total;
        }
        this.loading = false
      })
    },
    handleCancel() {
      this.close()
    },
  }
}
</script>

<style lang="less" scoped>
</style>
